<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <div
        ref="box"
        class="big_box"
      >
        <div
          v-for="item in newsList"
          :key="item.group_id"
          class="news_box"
          @click="goDet(item.item_id)"
        >
          <img
            v-lazy="item.middle_image"
            :src="item.middle_image"
            loading
          >
          <h1>{{ item.title }}</h1>
          <p>{{ item.abstract }}</p>
          <p>
            <span>来源：{{ item.source }}</span>
            <span>
              <van-tag type="success">{{ item.chinese_tag }}</van-tag>
            </span>
          </p>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>


<script>

import Vue from 'vue';

import {
  Tag, Toast, Lazyload, PullRefresh,
} from 'vant';

import { log } from 'util';

Vue.use(Tag).use(Toast).use(Lazyload).use(PullRefresh);

export default {
  data() {
    return {

      newsList: [],
      difference: 0,
      page: 0,
      isLoading: false,

    };
  },
  computed: {

  },
  watch: {
    difference: {
      handler(newval) {
        // console.log(newval)
        if (newval <= 0) {
          this.page++;
          if (this.page <= 5) {
            Toast('正在加载中。。');
            this.getNews();
          } else {
            Toast('无法加载更多了，亲～～～');
          }
        }
      }
    },
  },
  created() {
    this.getNews();
  },
  mounted() {
    // console.log(this.$refs.box.getBoundingClientRect())
    // console.log(window.innerHeight)
    // this.difference = this.$refs.box.getBoundingClientRect().bottom - window.innerHeight
    // console.log(this.difference)

    window.addEventListener('scroll', this.diff);
  },
  methods: {
    getNews() {
      const _this = this;
      _this.$axios.get(`http://api01.6bqb.com/toutiao/search?apikey=1F2DEB866ED455312D1D9FFE521BDD97&tag=__all__&page=${_this.page}`)
        .then((res) => {
          // console.log(res.data.data)
          // _this.newsList=[..._this.newsList,...res.data.data]
          const arr = res.data.data.slice(0, 8);
          _this.newsList = _this.newsList.concat(arr);
        });
    },
    diff() {
      this.difference = this.$refs.box.getBoundingClientRect().bottom - window.innerHeight;
    },
    onRefresh() {
      this.page = 0;
      this.newsList = [];
      this.getNews();
      this.isLoading = false;
      this.$toast('刷新成功');
    },
    goDet(id) {
      this.$router.push(`/home/news/news_details?id=${id}`);
    },


  },
};

</script>

<style lang="less" scoped>

    .news_box{
        width: 88%;
        padding: 6px 10px;
        background-color: #efefef;
        border-radius: 8px;
        margin: 8px auto;
/*         display: flex;
        justify-content: space-between; */
        // height: 120px;
        img{
            float: right;
            width: 35%;
            margin-left: 2px;
        }
            h1{
                font-size: 15px;
                line-height: 1.2;
                margin: 5px 0;
                color:#444;
            }
            p{
                font-size: 12px;
                line-height: 1.2;
                margin: 0px 0;
                color: #777;
                    span{
                    display: inline-block;
                    margin-right: 8px;
                    font-size: 10px;
                }
            }

    }


</style>
